/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../../styles/variables.scss";

$shield-inactive-color: var(--brand-primary-color);
$shield-active-color: $blue-02;
$secure-key-selector-bg-color: white;
$border-color: $grey-04;
$title-color: $grey-04;
$row-hover-bg-color: $grey-08;
$custom-entry-bg-color: $blue-02;
$custom-entry-color: white;
$custom-entry-expanded-bg-color: $grey-04;

$common-padding: 5px;
$row-height: 30px;
$custom-entry-height: 35px;

.secure-key-textarea-widget {
  position: relative;

  .form-control {
    border: 0;

    &.raw-text-input {
      padding-left: 25px;
    }
  }

  .secure-key {
    position: absolute;
    top: $common-padding;
    left: $common-padding;

    .icon-svg {
      font-size: 18px;
      color: $shield-inactive-color;
      cursor: pointer;
    }

    &.expanded {
      box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.4);
      background-color: $secure-key-selector-bg-color;
      border: 1px solid $border-color;
      margin-left: -$common-padding;
      margin-top: -$common-padding;
      width: 100%;
      z-index: 2;

      .top-part {
        padding: $common-padding;
        display: grid;
        grid-template-columns: 20px 1fr 20px;
      }
      .icon-svg { color: $shield-active-color; }

      .title {
        margin-left: 15px;
        color: $title-color;
      }

      .keys-list {
        max-height: 5 * $row-height;
        overflow-y: auto;
      }

      .secure-key-row {
        height: $row-height;
        line-height: $row-height;
        padding-left: 40px;
        border-top: 1px solid $border-color;
        cursor: pointer;

        &:hover {
          background-color: $row-hover-bg-color;
        }
      }

      .custom-entry-row {
        .helper-text {
          line-height: $custom-entry-height;
          background-color: $custom-entry-bg-color;
          color: $custom-entry-color;
          cursor: pointer;
        }

        &.expanded {
          background-color: $custom-entry-expanded-bg-color;
          padding: 5px 15px;
        }
      }
    }
  }
}
